<template>
	<div class="bg-white">
		<t-form :data="formData" :labeWidth="0">
			<!-- 员工信息 -->
			<div class="text-base font-semibold ml-4 pt-4">添加员工</div>
			<t-divider></t-divider>
			<div class="mb-4 w-80 ml-4">
				<div class="text-gray-400 mb-2">员工相片</div>
				<t-form-item name="user_photo">
					<t-upload 
						action="http://127.0.0.1:3000/my/addUserPhoto" 
						v-model="userFile" 
						theme="image"
						tips="请上传文件大小不大于10M,尺寸为1寸(宽高比13:16)的png,jpg,gif图片" 
						@fail="handleFail" 
						:headers="token"
						name="user_photo" 
						showUploadProgress
						:sizeLimit="{ size: 10, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }" @success="onSuccess"
						accept="image/*">
					</t-upload>
				</t-form-item>
			</div>
			<div class="flex ml-4">
				<div class="mr-8 w-80">
					<div class="text-gray-400 mb-2">员工昵称<span class="text-red-800 ml-2">*</span></div>
					<t-form-item name="nick_name">
						<t-input 
						v-model="formData.nick_name" 
						placeholder="请输入员工昵称" 
						:status="nick_name_status"
						:tips="nick_name_tips" 
						:onBlur="nickNameBlur"
						></t-input>
					</t-form-item>
				</div>
				<div class="w-80">
					<div class="text-gray-400 mb-2">真实姓名<span class="text-red-800 ml-2">*</span></div>
					<t-form-item name="name">
						<t-input 
						v-model="formData.name" 
						placeholder="请输入真实姓名"
						:status="name_status"
						:tips="name_tips"
						:onBlur="nameBlur"
						></t-input>
					</t-form-item>
				</div>
			</div>
			<div class="flex ml-4 mt-4">
				<div class="mr-8 w-80">
					<div class="text-gray-400 mb-2">身份证号码</div>
					<t-form-item name="id_number">
						<t-input 
						v-model="formData.id_number" 
						placeholder="请输入身份证号码"
						:status="id_number_status"
						:tips="id_number_tips"
						:onBlur="idNumnerBlur"
						></t-input>
					</t-form-item>
				</div>
				<div class="w-80">
					<div class="text-gray-400 mb-2">性别<span class="text-red-800 ml-2">*</span></div>
					<t-form-item name="sex">
						<t-select v-model="formData.sex" placeholder="请选择性别" :options="sexOptions"></t-select>
					</t-form-item>
				</div>
			</div>
			<div class="flex ml-4 mt-4">
				<div class="mr-8 w-80">
					<div class="text-gray-400 mb-2">手机号码<span class="text-red-800 ml-2">*</span></div>
					<t-form-item name="phone">
						<t-input 
						v-model="formData.phone" 
						placeholder="请输入手机号码"
						:status="phone_status"
						:tips="phone_tips"
						:onBlur="phoneBlur"
						></t-input>
					</t-form-item>
				</div>
				<div class="w-80">
					<div class="text-gray-400 mb-2">出生日期</div>
					<t-form-item name="birth_date">
						<t-date-picker v-model="formData.birth_date" placeholder="请选择出生日期" class="w-full"></t-date-picker>
					</t-form-item>
				</div>
			</div>
			<div class="ml-4 mt-4" style="width: 42rem;">
				<div class="text-gray-400 mb-2">现居地址</div>
				<t-form-item name="address">
					<t-input v-model="formData.address" placeholder="请输入现居地址"></t-input>
				</t-form-item>
			</div>
			<!-- 岗位信息 -->
			<div class="text-base font-semibold ml-4 mt-12">岗位信息</div>
			<t-divider></t-divider>
			<div class="flex ml-4 mt-4">
				<div class="mr-8 w-80">
					<div class="text-gray-400 mb-2">岗位名称<span class="text-red-800 ml-2">*</span></div>
					<t-form-item name="id_position">
						<t-select v-model="formData.id_position" placeholder="请选择岗位名称" :options="positionOptions"></t-select>
					</t-form-item>
				</div>
				<div class="w-80">
					<div class="text-gray-400 mb-2">所属部门<span class="text-red-800 ml-2">*</span></div>
					<t-form-item name="department">
						<t-cascader 
						v-model="department" 
						placeholder="请选择部门" 
						:options="departmentOptions"
						@change="onChange"
						></t-cascader>
					</t-form-item>
				</div>
			</div>
			<div class="flex ml-4 mt-4">
				<div class="mr-8 w-80">
					<div class="text-gray-400 mb-2">入职时间<span class="text-red-800 ml-2">*</span></div>
					<t-form-item name="entry_date">
						<t-date-picker v-model="formData.entry_date" placeholder="请选择入职时间" class="w-full"></t-date-picker>
					</t-form-item>
				</div>
				<div class="w-80">
					<div class="text-gray-400 mb-2">试用工资<span class="text-red-800 ml-2">*</span></div>
					<t-form-item name="try_out_money">
						<t-input 
						v-model="formData.try_out_money" 
						placeholder="请输入试用工资" 
						suffix="元"
						:status="try_out_money_status"
						:tips="try_out_money_tips"
						:onBlur="tryOutMoneyBlur"
						></t-input>
					</t-form-item>
				</div>
			</div>
			<div class="flex ml-4 mt-4">
				<div class="mr-8 w-80">
					<div class="text-gray-400 mb-2">试用合同</div>
					<t-form-item name="trial_contract">
						<t-upload 
						action="http://127.0.0.1:3000/my/addPdf" 
						accept="application/pdf" v-model="trialFile"
						tips="文件大小不大于10M，格式为pdf的文件" 
						@fail="handleFail" :headers="token" name="pdf"
						showUploadProgress :sizeLimit="{ size: 10, unit: 'MB', message: '文件大小不超过 {sizeLimit} MB' }"
						@success="trialOnSuccess" />
					</t-form-item>
				</div>
				<div class="w-80">
					<div class="text-gray-400 mb-2">账号权限<span class="text-red-800 ml-2">*</span></div>
					<t-form-item name="id_authority">
						<t-select v-model="formData.id_authority" placeholder="请选择账号权限" :options="authorityOptions"></t-select>
					</t-form-item>
				</div>
			</div>
			<!-- 银行信息 -->
			<div class="text-base font-semibold ml-4 mt-12">银行信息</div>
			<t-divider></t-divider>
			<div class="flex ml-4 mt-4">
				<div class="mr-8 w-80">
					<div class="text-gray-400 mb-2">开户银行</div>
					<t-form-item name="bank">
						<t-input 
						v-model="formData.bank" 
						placeholder="请输入开户银行"
						:status="bank_status"
						:tips="bank_tips"
						:onBlur="bankBlur"
						></t-input>
					</t-form-item>
				</div>
				<div class="w-80">
					<div class="text-gray-400 mb-2">银行卡号</div>
					<t-form-item name="bank_number">
						<t-input 
						v-model="formData.bank_number" 
						placeholder="请输入银行卡号"
						:status="bank_number_status"
						:tips="bank_number_tips"
						:onBlur="bankNumberBlur"
						></t-input>
					</t-form-item>
				</div>
			</div>
			<div class="flex ml-4 mt-8 mb-16">
				<t-button class="mr-4" @click="goUserDataHome()" theme="default" variant="base">取消</t-button>
				<t-button @click="goSubmit()">提交</t-button>
			</div>
		</t-form>
	</div>
</template>

<script>
	import { getToken } from '@/unit/auth'
	import { isName, isIdNumber, isvalidPhone, isNumber, isSpecial, isBankNumber } from '@/unit'
	import { toDay } from '@/unit/myDate'

	export default {
		name: 'AddUser',
		data() {
			return {
				formData: {
					phone: '',
					nick_name: '',
					name: '',
					sex: '',
					id_number: '',
					user_photo: '',
					bank: '',
					bank_number: '',
					address: '',
					id_position: '',
					id_department1: '',
					id_department2: '',
					entry_date: '',
					try_out_money: '',
					trial_contract: '',
					id_authority: '',
					birth_date: '',
				},
				// 性别选项
				sexOptions: [{
						value: 0,
						label: '男'
					},
					{
						value: 1,
						label: '女'
					}
				],
				// 权限选项
				authorityOptions: [],
				// 部门选中值
				department: '',
				// 头像文件
				userFile: [],
				// 合同文件
				trialFile: [],
				// 头像
				user_photo: '',
				// 提交弹出提示框
				mydialog: null,
				//// 校验
				nick_name_status: '',
				nick_name_tips: '',
				name_status: '',
				name_tips: '',
				id_number_status: '',
				id_number_tips: '',
				phone_status: '',
				phone_tips: '',
				try_out_money_status: '',
				try_out_money_tips: '',
				bank_status: '',
				bank_tips: '',
				bank_number_status: '',
				bank_number_tips: '',
				positionOptions: []
			}
		},
		computed: {
			// 部门选项
			departmentOptions() {
				return this.$store.state.user.DepartmentList
			},
			// 获取token设置请求头
			token() {
				let obj = {
					"Authorization": getToken()
				}
				return obj
			},
			// 提交判断
			isSubmit(){
				if (this.nickNameBlur() && this.idNumnerBlur() && this.phoneBlur() && this.tryOutMoneyBlur() && this.bankBlur() && this.bankNumberBlur()){
					return true
				} else {
					return false
				}
			},
		},
		methods: {
			// 回到详情主页
			goUserDataHome() {
				this.$bus.emit('goUserDataHome')
			},
			// 昵称校验
			nickNameBlur() {
				if (this.formData.nick_name === '') {
					this.nick_name_status = 'error'
					this.nick_name_tips = '昵称是必填项'
					return false
				} else {
					this.nick_name_status = ''
					this.nick_name_tips = ''
					return true
				}
			},
			// 姓名校验
			nameBlur(){
				if (!isName(this.formData.name)) {
					this.name_status = 'error'
					this.name_tips = '请输入正常的中文姓名'
					return false
				} else {
					if (this.formData.name === ''){
						this.name_status = 'error'
						this.name_tips = '姓名是必填项'
						return false
					} else {
						this.name_status = ''
						this.name_tips = ''
						return true
					}
				}
			},
			// 身份证号校验
			idNumnerBlur(){
				if(!isIdNumber(this.formData.id_number)){
					this.id_number_status = 'error'
					this.id_number_tips = '请输入合法的二代身份证号码'
					return false
				} else {
					this.id_number_status = ''
					this.id_number_tips = ''
					return true
				}
			},
			// 手机校验
			phoneBlur(){
				if(this.formData.phone === ''){
					this.phone_status = 'error'
					this.phone_tips = '手机号是必填项'
					return false
				} else {
					if(!isvalidPhone(this.formData.phone)){
						this.phone_status = 'error'
						this.phone_tips = '请输入合法的手机号码'
						return false
					} else {
						this.phone_status = ''
						this.phone_tips = ''
						return true
					}
				}
			},
			// 试用工资校验
			tryOutMoneyBlur(){
				if(this.formData.try_out_money === ''){
					this.try_out_money_status = 'error'
					this.try_out_money_tips = '试用工资是必填项'
					return false
				} else {
					if(!isNumber(this.formData.try_out_money)){
						this.try_out_money_status = 'error'
						this.try_out_money_tips = '只能输入数字'
						return false
					} else {
						this.try_out_money_status = ''
						this.try_out_money_tips = ''
						return true
					}
				}
			},
			// 开户行校验
			bankBlur(){
				if(!isSpecial(this.formData.bank)){
					this.bank_status = 'error'
					this.bank_tips = '请不要含有特殊字符'
					return false
				} else {
					this.bank_status = ''
					this.bank_tips = ''
					return true
				}
			},
			// 银行账号校验
			bankNumberBlur(){
				if(this.formData.bank_number === ''){
					this.bank_number_status = ''
					this.bank_number_tips = ''
					return true
				} else {
					if(!isBankNumber(this.formData.bank_number)){
						this.bank_number_status = 'error'
						this.bank_number_tips = '请输入正确的银行卡号'
						return false
					} else {
						this.bank_number_status = ''
						this.bank_number_tips = ''
						return true
					}
				}
			},
			// 提交业务
			goSubmit() {
				if (!this.isSubmit) {
					this.$message.error('您提交的信息中，存在不合法信息，请仔细检查')
					return
				}
				if (this.mydialog) {
					this.mydialog.show();
					return;
				}
				// 弹出弹窗确认通过发送请求
				this.mydialog = this.$dialog({
					header: '提示',
					body: `您即将要添加一名新员工，是否确认？`,
					className: 't-dialog-new-class1 t-dialog-new-class2',
					style: 'color: rgba(0, 0, 0, 0.6)',
					onConfirm: () => {
						this.mydialog.hide();
						// 遍历formData的属性，将属性为空的属性从提交表单里去掉
						let obj = {}
						for(let i in this.formData){
							if(this.formData[i] !== ''){
								obj[i] = this.formData[i]
							}
						}
						this.$store.dispatch('user/addUser', obj).then((res) => {
							if(res.status === 0){
								this.$message.success(res.message)
								this.$router.push({name: 'User'})
							} else {
								this.$message.error(res.message)
							}
						})
					},
				});
			},
			// 连级选择器
			onChange(val, context) {
				this.department = val
				this.formData.id_department1 = val.split('.')[0]
				this.formData.id_department2 = val.split('.')[1]
			},
			// 头像上传
			handleFail({ file }) {
				this.$message.error(`文件 ${file.name} 上传失败`)
			},
			// 头像上传成功
			onSuccess(context) {
				if (context.response.status == 0) {
					this.formData.user_photo = context.response.data
					this.$message.success(context.response.message)
				} else {
					this.$message.error(context.response.message)
				}
			},
			// 合同上传成功
			trialOnSuccess(context) {
				if (context.response.status == 0) {
					this.$store.state.user.userInfoDataUpdate.trial_contract = context.response.data
					this.$message.success(context.response.message)
				} else {
					this.$message.error(context.response.message)
				}
			},
		},
		created() {
			// 请求部门信息
			this.$store.dispatch('user/getDepartmentList')
			// 请求权限信息
			this.$store.dispatch('user/getActivityList').then((res) => {
				if (res.status === 0) {
					let arr = res.data
					for (let i = 0; i < arr.length; i++) {
						this.authorityOptions[i] = {}
						this.authorityOptions[i].value = arr[i].authority_id
						this.authorityOptions[i].label = arr[i].a_name
					}
				} else {
					this.$message.error(res.message)
				}
			})
			// 请求岗位信息
			this.$store.dispatch('user/getPositionList').then(res => {
				if (res.status === 0) {
					for (let i = 0; i < res.data.length; i++) {
						this.positionOptions[i] = {}
						this.positionOptions[i].label = res.data[i].position_name
						this.positionOptions[i].value = res.data[i].position_id
					}
				} else {
					this.$message.error(res.message)
				}
			})
			// 初始化出生日期和入职日期
			this.formData.entry_date = toDay()
			this.formData.birth_date = toDay()
		}
	}
</script>

<style>
</style>
